<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
<table cellspacing="0">
  <thead>
  <tr>
    <th>姓名</th>
    <th>科目</th>
    <th>成绩</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>

  </tbody>
</table>
<script>
  var datas = [{
    name: 'xiaoming',
    subject: 'English',
    score: 88
  }, {
    name: 'xiaohong',
    subject: 'English',
    score: 99
  }, {
    name: 'xiaohua',
    subject: 'English',
    score: 77
  }];
  var tbody = document.querySelector('tbody');

  for(var i = 0; i < datas.length; i++){
    var tr = document.createElement('tr');
    tbody.appendChild(tr);

    for(var k in datas[i]){
      let th = document.createElement('th');
      th.innerHTML = datas[i][k];
      tr.appendChild(th);
    }

    var th = document.createElement('th');
    th.innerHTML = `<a href="javascript:;">delete</a>`;
    th.children[0].onclick = function(){
      this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    };
    tr.appendChild(th);
  }

</script>
</body>
</html>